<template>
  <div class="tradeContainer">

    <div class="div">
      <div v-show="$route.meta.showHeaderBar" class="header">
        <div class="wb-header">
          <van-icon name="wap-home-o" @click="toHome" />
          <div class="wb_logo">
            <img src="../../assets/headerxxx.jpg" alt="">
          </div>
          <div class="icon">
            <van-icon name="search" @click="toSearch" />
            <van-icon name="shopping-cart-o" @click="toShopCart" style="margin-left: 10px; margin-right: 1px" />
          </div>
        </div>
      </div>

      <div class="toast">
        <van-notice-bar left-icon="volume-o" text="因事件（疫情，特大暴雨）影响，部分地区无法配送至指定位置，需耐心等候！谢谢合作" />
      </div>

      <div class="Contact">
        <van-address-list v-model="chosenAddressId" :list="list" default-tag-text="默认" />
      </div>

      <div class="gift">
        <van-radio-group disabled class="group">
          <van-radio name="1" class="radio" icon-size="17px">礼品卡余额： ￥0.00</van-radio>
        </van-radio-group>
        <div class="giftIcon">></div>
      </div>
      <div class="gift2">
        <van-radio-group disabled class="group">
          <van-radio name="1" class="radio" icon-size="17px">余额： ￥0.00</van-radio>
        </van-radio-group>
        <van-icon name="chat-o" class="giftIcon twoIcon" />
      </div>

      <div class="shopPriceAll">
        <div class="priceText">商品合计<span>￥49.00</span></div>
      </div>

      <div class="shopPriceAll">
        <div class="priceText">邮费<span>￥8.00</span></div>
      </div>

      <div class="shopPriceAll">
        <div class="priceText">活动优惠<span>￥-10.00</span></div>
      </div>

      <div class="bill">
        <van-radio-group class="group">
          <van-radio name="1" class="radio" icon-size="17px">我要开发票</van-radio>
        </van-radio-group>
        <div class="giftIcon">></div>
      </div>

      <div class="tit">
        包裹1 <span>16:00前支付，预计9月3日送达</span>
      </div>

      <div class="info">
        <van-card class="cardItem" v-for="(cart, index) in cartInfoList" :key="cart.id" :num="cart.skuNum" :price="cart.cartPrice" :desc="cart.skuName" :thumb="cart.imgUrl">
          <!-- <button class="text">部分服务不支持</button> -->

        </van-card>
      </div>

      <!-- 协议 -->
      <div class="https">
        <div class="radio">
          <i>我已同意</i><span>《网易严选服务协议》</span>
        </div>
      </div>
    </div>

    <div class="box">
      <div class="bottomBox">
        <div class="text">应付：<span>￥{{allMoney}}</span></div>
        <div class="submit" @click="submitOrder">提交订单</div>
      </div>
    </div>

  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import * as API from '@/api/index'
import {reqSubmitOrder} from '@/api/pages/pay'
import {Toast} from "vant";
export default {
  name: 'Trade',

  data() {
    return {
      chosenAddressId: '1',
      list: [
        {
          id: '1',
          name: '陈浮生',
          tel: "13712345567",
          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
          isDefault: true,
        },
      ]
    }
  },

  mounted() {
    this.getUserAddressList()
    this.getTradeInfo();
  },

  methods: {
     getTradeInfo() {
      this.$store.dispatch("getTradeInfo");
    },
    // 获取默认地址信息
    getUserAddressList() {
      this.$store.dispatch('getUserAddressList')

    },

    //提交订单（本质就是发请求创建订单）
    async submitOrder() {
      //发请求创建订单
      // 创建订单成功之后跳转到支付页面
      let tradeNo = this.tradeInfo.tradeNo;
      let tradeInfo = {
        consignee: this.defaultAddress.consignee,
        consigneeTel: this.defaultAddress.phoneNum,
        deliveryAddress: this.defaultAddress.fullAddress,
        paymentWay: "ONLINE",
        orderComment: this.message,
        orderDetailList: this.tradeInfo.detailArrayList
      };

      const result = await this.$API.pay.reqSubmitOrder(tradeNo,tradeInfo);
      if(result.code === 200){
        this.orderNo = result.data //存不存这个订单编号没啥意义，我们是想携带这个编号去支付页面
        // alert('创建订单成功，准备自动跳转到支付页面')
        // Toast.success('提交成功');
        this.$router.push('/pay?orderNo=' + result.data)
      }
    },






    toHome() {
      this.$router.push('/home')
    },

    // 去购物车
    toShopCart() {
      this.$router.push('/cart')
    },
    toSearch() {
      this.$router.push('/search')
    },


  },


  computed: {
    ...mapState({
      userAddressList: (state) => state.trade.userAddressList || [],
       tradeInfo: (state) => state.trade.tradeInfo,
    }),

    ...mapGetters(['cartInfoList', 'allMoney']),


    defaultAddress() {
      return this.userAddressList.find(item => item.isDefault === "1") || {}
    },

  },


}
</script>

<style lang='less' scoped>
.tradeContainer {
  width: 100%;
  height: 100%;
  background-color: rgb(245, 238, 238);
  display: flex;
  flex-direction: column;
}

.tradeContainer .div {
  width: 100%;
  height: 100%;

  // margin-bottom: 160px;
}

.tradeContainer .header {
  width: 100%;
  height: 44px;
  background-color: #fff;
  .wb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    height: 50px;
    background-color: #fafafa;
    .van-icon {
      font-size: 26px;
      color: #333;
    }
    .wb_logo {
      img {
        width: 86px;
        height: 22px;
      }
    }
  }
}

.tradeContainer .toast {
  width: 100%;
  height: 40px;
  background-color: #fff8d8;
  margin-bottom: 10px;
  padding-left: 10px;
}

.tradeContainer .Contact {
  border-top: 1px solid #ccc;
  background-color: #fafafa;
  .van-address-list {
    padding: 10px;
    .van-button--block {
      display: none;
    }
  }
}

.tradeContainer .gift {
  width: 100%;
  height: 40px;
  display: flex;
  line-height: 30px;
  padding-right: 40px;
  margin-top: 10px;
  border-bottom: 1px solid #ccc;
  background-color: #fafafa;
}

.tradeContainer .gift .group {
  width: 85%;
  height: 19px;
  margin-left: 20px;
  padding-top: 10px;
  .radio {
    font-size: 15px;
  }
}
.tradeContainer .gift .giftIcon {
  font-size: 18px;
  width: 25px;
  height: 25px;
  color: #9c9d9f;
  margin-top: 5px;
  text-align: center;
}

.tradeContainer .gift2 {
  width: 100%;
  height: 40px;
  display: flex;
  line-height: 30px;
  padding-right: 40px;
  border-bottom: 1px solid #ccc;
  background-color: #fafafa;
  margin-bottom: 10px;
}

.tradeContainer .gift2 .group {
  width: 85%;
  height: 19px;
  margin-left: 20px;
  padding-top: 10px;
  .radio {
    font-size: 15px;
  }
}

.tradeContainer .gift2 .giftIcon.twoIcon {
  margin-top: 8px;
}

.tradeContainer .shopPriceAll {
  width: 100%;
  height: 30px;
  border-bottom: 1px solid #ccc;
  // margin-left: 16px;
  padding: 10px 10px;
  background-color: #fafafa;
}
.tradeContainer .shopPriceAll .priceText {
  font-size: 14px;
  line-height: 30px;
  width: 100%;
  height: 30px;
}

.tradeContainer .shopPriceAll span {
  float: right;
  margin-right: 20px;
}

.tradeContainer .bill {
  width: 100%;
  height: 40px;
  display: flex;
  line-height: 30px;
  padding-right: 40px;
  margin-top: 10px;
  border-bottom: 1px solid #ccc;
  background-color: #fafafa;
  margin-bottom: 10px;
}

.tradeContainer .bill .group {
  width: 85%;
  height: 19px;
  margin-left: 15px;
  padding-top: 10px;
  .radio {
    font-size: 15px;
  }
}

.tradeContainer .bill .giftIcon {
  font-size: 18px;
  width: 25px;
  height: 25px;
  color: #9c9d9f;
  margin-top: 5px;
  text-align: center;
}

.tradeContainer .tit {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  padding-left: 15px;
  background-color: #fafafa;
  border-bottom: 1px solid #ccc;
}
.tradeContainer .tit span {
  font-size: 10px;
  color: #999;
}

.tradeContainer .info {
  width: 100%;
  height: 100%;
  background-color: #fafafa;
  .cardItem{
    width: 100%;
    height: 104px;
  }
}
// .tradeContainer .info van-card .text {
//   margin-left: 20px;
//   color: #aaa;
// }

.tradeContainer .https {
  width: 100%;
  height: 40px;
  line-height: 30px;
  padding-right: 40px;
  margin-top: 10px;
}

.tradeContainer .https .radio {
  width: 85%;
  height: 19px;
  margin-left: 15px;
  line-height: 19px;
  .radio {
    font-size: 10px;
    color: #ccc;
  }
  i {
    color: #999;
  }
  span {
    color: #000;
  }
}

.tradeContainer .box {
  width: 100%;
  height: 48px;
  padding-left: 20px;

  flex: 1;
  z-index: 1111;
  margin-left: -10px;
}

.tradeContainer .box .bottomBox {
  width: 100%;
  height: 48px;
  background-color: #fafafa;
  display: flex;
  position: fixed;
  bottom: 0;
}

.tradeContainer .box .bottomBox .text {
  font-size: 17px;
  color: red;
  line-height: 48px;
  flex: 1;
}

.tradeContainer .box .bottomBox .submit {
  font-size:14px;
  width: 113px;
  height: 48px;
  background-color: red;
  line-height: 48px;
  color: white;
  text-align: center;
}
</style>
